<template>
  <div class="sys-area-input">
    <div style="line-height:1.2;padding-top:10px" v-if="disabled" v-html="getHtmlData()"></div>
    <el-input v-else v-model="text" :size="size" type="textarea" :rows="rows" :autosize="autosize" resize="none" :placeholder="placeholder"
      :show-word-limit="showWordLimit" :maxlength="maxlength" @change="inputChange">
    </el-input>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
        required: true
      },
      size: String,
      placeholder: String,
      rows: Number,
      autosize: [Boolean, Object],
      maxlength: Number,
      showWordLimit: Boolean,
      disabled: {
        type: Boolean,
        default: false
      },
      hasEscape: {
        type: Boolean,
        default: true
      }
    },

    watch: {
      value() {
        if (this.inputText !== null) {
          this.inputText = null;
          return;
        }
        this.text = this.getTextData();
      }
    },

    data() {
      return {
        text: this.getTextData(),
        inputText: null
      };
    },

    methods: {
      inputChange() {
        let text = this.text;
        if (this.hasEscape) {
          text = _.escape(text);
        }
        this.inputText = null;
        this.$emit('input', text);
        this.$emit('change', text);
      },

      getTextData() {
        let value = this.value;
        let text;
        if (this.hasEscape) {
          text = _.unescape(value);
        } else {
          text = value;
        }
        return text;
      },

      getHtmlData() {
        let value = this.value;
        if (!this.hasEscape) {
          value = _.escape(value);
        }
        value = value.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
        return value;
      }
    }
  };

</script>

<style lang="scss" scoped>
  .system-textarea {
    >.el-input {
      width: 100%;
    }
  }

</style>
